
import React, { Component } from 'react';

import {
    BrowserRouter as Router,
    Route,
    Link,
} from 'react-router-dom';
import Home from './../container/home/home';

const Routers = [
    {
        path: '/',
        exact: true,
        slideBar: ()=> <Home />,
        main: ()=> (<h2>Home</h2>)
    },{
        path: '/about',
        slideBar: ()=> (<div>About</div>),
        main: ()=> (<h2>About</h2>)
    },{
        path: '/theme',
        slideBar: ()=> (<div>Theme</div>),
        main: ()=> (<h2>Theme</h2>)
    }
]

const SlideBar = ()=> (
    <Router>
        <div style={{ display: 'flex' }}>
            <div>
                <ul>
                    <li>
                        <Link to='/'>Home</Link>
                    </li>
                    <li>
                        <Link to='/about'>About</Link>
                    </li>
                    <li>
                        <Link to='/theme'>Theme</Link>
                    </li>
                </ul>
            </div>
            <div style={{ flex: 1 }}>
                {
                    Routers.map((item,index)=> (
                        <Route
                            key={ index }
                            path={ item.path }
                            exact={ item.exact }
                            component= { item.main }
                        />
                    ))
                }
            </div>
        </div>
    </Router>
)

export default SlideBar;